import styled from "styled-components";
export const SIndex = styled.div`
// 版心
*{
    padding:0;
    margin:0;
}
.content{
    width:1320px;
    margin:auto;
}
.active{
    height: 1070px;
    overflow:hidden;
    position: relative;
}
.active_top h3 ,.active_top h1{
    text-align:center;
    color: #18368b;
}
.active_top{
    margin: 50px auto 30px auto;

}
.active_left{
    float: left;
    width: 650px;
    overflow:hidden;
    position: absolute;
    top: 220px;
    left: 0;
    z-index:1
}
.active_left img{
    width: 650px;
}
.active_right{
    float: right;
    width: 730px;
    height: 857px;
    background: #bfdfff;
    overflow:hidden;
    position: absolute;
    right: 0;
    box-sizing: border-box;
    padding: 60px 140px 50px 190px;
}
.active_right p{
    width:170px;
    font-size: 24px;

}
.active_right img{
    width:  400px;
    height: 300px;
    margin: 60px auto;
}
.btn_wrap{
    width: 400px;
    height: 50px;
    overflow:hidden;
    margin: 80px 0 80px 0;
}
.btn_wrap button{
    width:  400px;
    height: 50px;
    font-size: 18px;
    background-color: #081f63;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: .5s;
    
}
.btn_wrap button:hover{
    transform: scale(1.2);
}

.active_left_two{
    float: left;
    width: 730px;
    height: 857px;
    background: #bfdfff;
    overflow:hidden;
    position: absolute;
    left: 0;
    box-sizing: border-box;
    padding: 60px 140px 50px 130px;
}
.active_left_two p{
    width:170px;
    font-size: 24px;

}
.active_left_two img{
    width:  400px;
    height: 300px;
    margin: 60px auto;
}
.active_right_two{
    float: right;
    width: 650px;
    overflow:hidden;
    position: absolute;
    top: 220px;
    right: 0;
    z-index:1
}
.active_right_two img{
    width: 650px;
}
.share ul{
    overflow:hidden;
    position: relative;
}
.share ul li{
    width: 430px;
    float: left;
    margin: 0 10px 10px 0;
}
.share ul li img{
    width: 430px;
    opacity: 1;
}
.share ul li:nth-of-type(1) img{
    height: 560px;
}
.share ul li:nth-of-type(2) img{
    height: 370px;
}
.share ul li:nth-of-type(3) img{
    height: 180px;
}
.share ul li:nth-of-type(4) img{
    height: 370px;
}
.share ul li:nth-of-type(5) img{
    height: 180px;
    position:absolute;
    top: 380px;
    left: 440px;
}
.share ul li img:hover{
    opacity:0.8;
}
`
//大轮播图
export const SBigBanner = styled.div`
.bigbanner{
    width:100%;
    overflow: hidden;
}
img{
    width:100%;
    height:100%
}


`
// 小轮播图
export const SSmallBanner = styled.div`
*{
    padding:0;
    margin:0;
}
.swiper-button-prev ,.swiper-button-next{
    font-size: 20px;
    width:10px;
    color: rgba(26, 70, 202, 0.9);
}
.title{
    text-align: center;
}
.title_bar{
    margin: 40px auto 30px auto;
}
.title_bar h1{
    color: #18368b;

}

`
export const SOneList = styled.div`
*{
    pading:0;
    margin:0;
}
.content{
    width:1320px;
    margin:auto;
    overflow:hidden;
}
.onelist{
    overflow: hidden;
    float: left;
    margin: 10px 5px
}
.OneProduct{
    width: 320px;
    // background:#fafafa;
    cursor: pointer;
    border: 2px solid #fafafa;
    
}
.OneProduct img{
    width: 320px;
    transition: .3s;
}
.info{
    margin-top: 15px;
    text-align: center;
}
.info h4{
    font-weight: normal;
}
p b{
    font-size: 14px;
    color: rgba(26, 70, 202, 0.9);
}
p span{
    margin: 0 4px;
}
button{
    width: 150px;
    height: 35px;
    border-radius: 10px;
    border: 0;
    opacity: .8;
    background-color: #081f63;
    color: #ffffff;
    margin: 10px 0;
}
button:hover{
    opacity: 1;
}
.OneProduct img:hover{
    transform: scale(1.1);
}
.OneProduct img:hover {
    transform: scale(1.1);
}




`